<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />

    <title>Hello React!</title>
<!-- 引入依赖 -->

    <!--!! .min.js => 生产环境会对代码进行 压缩 和 混淆(缩短变量名=>性能优化) -->
    <!--react： react相关的核心方法（实例和方法） -->
    <script src="https://unpkg.com/react@^16/umd/react.production.min.js"></script>

    <!--react-dom： 和浏览器相关，和操作dom相关 (提供ReactDOM)-->
    <script src="https://unpkg.com/react-dom@16.13.0/umd/react-dom.production.min.js"></script>
    <!-- 早期引入一个库，新版本拆成两个 => 关注点分离，细腻度更高，更灵活 -->

    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
    <!--  -->
  </head>

  <body>
    <div id="root"></div>

    <script type="text/babel">
      //1. type="text/babel"
      // Babel是JS编译器,依赖于官方的Babel库<script src="https://unpkg.com/babel-standalone@6.26.0/babel.js">

    // HTML <script> type 属性    // https://www.runoob.com/tags/att-script-type.html
        // 带有指定 type 属性的脚本：
        // <script type="text/javascript">
        // 在 HTML5 中，type 属性不再是必需的。script标签type的默认值是 "text/javascript"。也就是说script标签里是JS内容



      //2. 为什么JS里可以写html标签
      // 通过bable编译后，把h1标签转化为react的方法的执行，编译后可以执行
      //3. 为什么可以写App标签
      // App没有在HTML里渲染，只是通过JS去调用

      //!!! 组件并没有通过HTML直接去渲染，而是变成方法去执行

// 混淆
// var aaaa = 'xxxxx'
// var a = 'xxxxx'



      // React code will go here

      // react和react-dom两个库会默认把React和ReactDOM方法挂载到window下
      console.log(React, ReactDOM) //对象

      class App extends React.Component {
        render() {
          return <h1>Hello world!</h1>
          // <h1>标签转化为react下的方法 —— React.creatElement("h1", null ,"Hello world!")
        }
      }

      // 渲染App标签
      ReactDOM.render(<App />, document.getElementById('root'))
      // <App />变成JS方法的执行
    </script>


<script>
//3. 不用babel依然可以写react


  //1. 创建App组件
  // App创建的是h1，封装了h1内容
  // 创建App这个类 继承Component方法
  // 重写了render方法，return了React.creatElement，给它h1属性，内容是Hello world!
class App extends React.Component {
  render() {
    return /*#__PURE__*/React.creatElement("h1", null,"Hello world!");
  }
}
//2。 挂载到真实DOM渲染
// 创建App组件，挂载到root标签下
ReactDOM.render( /*#__PURE__*/React.creatElement(App, null), document.getElementById('root'));
</script>


<script>
import { jsx as _jsx } from "react/jsx-runtime";
class App extends React.Component {
  render() {
    return /*#__PURE__*/_jsx("h1", {
      children: "Hello world!"
    });
  }
}
ReactDOM.render( /*#__PURE__*/_jsx(App, {}), document.getElementById('root'));
</script>
  </body>
</html>